<template>
  <Panel title="预测预警" v-bind="props.config">
    <!-- 分钟按钮部分 -->
    <div class="mins-box">
      <a-button type="primary" class="btn-item" v-for="item in computedMins" :key="item.min" @click="switchMin(item)">
        <span :class="state.currentForecastType === item.forecastType ? 'btn-text active' : 'btn-text'"
          >{{ item.min }}min</span
        >
      </a-button>
    </div>

    <!-- 表格部分 -->
    <div class="table">
      <ScrollTable
        scroll="calc(100% - 0.38rem)"
        rowKey="warnId"
        :columns="columns"
        :dataSource="state.list"
        :loading="state.loading"
        @tableClick="handleTableRow"
      >
        <template v-slot:jamTypeName="{ text }">
          <span :class="mapJamTypeClass(text)"> {{ text }}</span>
        </template>
      </ScrollTable>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'TrafficWarn'
}
</script>
<script setup>
/**
 * @desc 预测预警 (2级)
 * @auther 邓清波
 * @date 2022/10/20
 * **/
import Panel from '../../components/panel'
import { reactive, defineProps, defineEmits, computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import ScrollTable from '../../components/scroll-table'
import trafficApi from '../../api/traffic'
import useWatchStore from '@/hooks/useWatchStore'
import { lineColors } from '../../config/traffic'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'
import { get } from '@/utils'
import warnData from './data' // 交建局临时数据

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => ({})
  }
})

const route = useRoute()

const emit = defineEmits(['setDetail'])
const store = useStore()
const roadType = computed(() => store.state.config.roadType)

const mins = [
  {
    min: 15,
    forecastType: '1'
  },
  {
    min: 30,
    forecastType: '2'
  },
  {
    min: 60,
    forecastType: '3'
  },
  {
    min: 120,
    forecastType: '4'
  }
]
// 公路仅有15min
const computedMins = computed(() => {
  if (roadType.value == 1) {
    return mins
  }
  return [mins[0]]
})

const columns = [
  {
    title: '拥堵情况',
    dataIndex: 'jamTypeName',
    key: 'jamTypeName',
    width: '20%',
    align: 'center',
    ellipsis: true
  },
  {
    title: '路线名称(桩号范围)',
    dataIndex: 'text',
    key: 'text',
    width: '42%',
    ellipsis: true
  },
  {
    title: '预测流速',
    align: 'speed',
    dataIndex: 'speed',
    key: 'address',
    ellipsis: true,
    width: '20%',
    customRender({ text }) {
      return text ? `${text}km/h` : null
    }
  },
  {
    title: '预测流量',
    align: 'center',
    key: 'flow',
    dataIndex: 'flow',
    ellipsis: true,
    width: '22%',
    customRender({ text }) {
      return text ? `${text}辆/15min` : null
    }
  }
]
const state = reactive({
  loading: false,
  currentForecastType: '1',
  list: [] // 列表数据
})
const arg = ref({})

// 映射方向字段
const mapRoadDirection = {
  1: '上行',
  2: '下行',
  3: '双向',
  4: '未知'
}

useWatchStore(getData)

/**
 * @desc 获取预测预警列表数据
 * **/
function getData(argParams) {
  if (route.params.pageId == 'jjj') {
    state.list = concatListText(warnData)
  } else {
    arg.value = argParams
    if (argParams.roadType === 2) {
      state.currentForecastType = '1'
    }
    state.loading = true
    const params = {
      roadType: argParams.roadType,
      province: '32',
      city: argParams.isProvince ? null : argParams.areaCode,
      forecastType: state.currentForecastType,
      orgId: get(store, 'state.user.userInfo.orgInfos.0.orgId')
    }

    trafficApi
      .getTrafficForecastList(params)
      .then(res => {
        state.list = concatListText(res.data)
      })
      .catch(() => {
        message.error('请求失败')
      })
      .finally(() => {
        state.loading = false
      })
  }
}

// 拥堵情况字段映射 class
function mapJamTypeClass(value) {
  const level = {
    轻度拥堵: 'slight common',
    中度拥堵: 'moderate common',
    重度拥堵: 'severe common',
    // 以上高速

    // 以下公路
    大流量: 'big-flow common',
    拥堵: ' traffic common '
  }
  return level[value]
}

/**
 * @desc 处理数组中的路线名称  （tip:不同路网维度展示字段不一样）
 * @param   list { Array }
 * @param   Array
 * ***/
function concatListText(list) {
  const _roadType = roadType.value
  if (!Array.isArray(list)) return []

  return list.map((i, index) => {
    i.lineColor = lineColors[i.jamTypeName] // 地图线的颜色

    const roadNum = i.roadNum || '' // 路线编号
    const roadName = i.roadName || '' // 路线名称
    const roadDirection = mapRoadDirection[i.roadDirection] ? `${mapRoadDirection[i.roadDirection]}` : '' // 方向
    // 起始千百米桩号  // 终点桩号
    const startStakeK = i.startStakeKm ? 'K' + i.startStakeKm : ''
    const startStakeM = i.startStakeM ? '+' + i.startStakeM : ''
    const endStakeK = i.endStakeKm ? '-K' + i.endStakeKm : ''
    const endStakeM = i.endStakeM ? '+' + i.endStakeM : ''

    const gl = `${roadName} ${roadDirection} ${startStakeK}${startStakeM}${endStakeK}${endStakeM}` // 公路字段
    const gs = `${roadNum} ${roadName} ${roadDirection} ${startStakeK}${startStakeM}${endStakeK}${endStakeM}` // 高速的字段
    i.text = _roadType === 2 ? gl : gs
    i.warnId = `${i.jamId}${i.describe}${roadDirection}${startStakeK}${startStakeM}${endStakeK}${endStakeM}${index}`
    return i
  })
}

/**
 * @desc 切换时间
 * **/
function switchMin({ forecastType }) {
  state.currentForecastType = forecastType
  getData(arg.value)
}

function handleTableRow(row) {
  if (route.params.pageId == 'jjj') return
  emit('setDetail', {
    type: 'traffic-warn',
    actions: 'click',
    data: row,
    config: props.config.detailConfig
  })
}
</script>

<style lang="less" scoped>
@import url('../../styles/themes/variables.less');

/deep/ .mz-panel-content-main {
  padding: 8px 5px 0 5px;
}

/deep/ .ant-table-wrapper tr td:nth-child(3),
/deep/ .ant-table-wrapper tr th:nth-child(3) {
  padding-left: 10px !important;
}

.slight {
  width: 0.61rem;
  height: 0.14rem;
  font-size: 0.14rem;
  padding: 2px 2px;
  border-radius: 4px;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  background: #f53f3f;
}

.mins-box {
  margin: 0 0 8px 15px;
  display: flex;

  .btn-item {
    position: relative;
    display: flex;
    width: 58px;
    height: 19px;
    line-height: 19px;
    font-size: 12px;
    background-color: #8fb2f7;
    margin-right: 8px;
    padding: 0;
    border: 0;

    & span {
      height: 100%;
      line-height: 19px;
    }

    .btn-text {
      height: 100%;
      width: 100%;
      position: relative;
    }

    .active {
      background-color: #4b87fd;

      &::after {
        content: ' ';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 58px;
        height: 1px;
        background-color: #4b87fd;
      }
    }
  }
}

.table {
  height: calc(100% - 35px);
}

.slight {
  width: 0.61rem;
  height: 0.14rem;
  font-size: 0.14rem;
  padding: 2px 2px;
  border-radius: 4px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  background: #f53f3f;
}

.common {
  width: 100%;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  padding: 1px 6px 2px 6px;
  border-radius: 4px;
  color: #fff;
}

.slight {
  background-color: @traffic-level-1;
}

.moderate {
  background-color: @traffic-level-2;
}

.severe {
  background-color: @traffic-level-3;
}

.big-flow {
  background-color: #33c2d7;
}

.traffic {
  background-color: #f33c18;
}

/deep/ .ant-table-tbody {
  overflow-x: hidden;
  font-size: 14px;
}
</style>
